<template>
	<view class="u-wrap">
		<view class="search">
			<view class="search-box">
				<image src="../../static/ss.png" mode=""></image>
				<input type="text" v-model="content" placeholder="搜索" placeholder-style="color:#B3CCFD" confirm-type="搜索" @confirm="handlesearch">
			</view>
		</view>
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in categories" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
				 :data-current="index" @tap.stop="swichMenu(index,item.id)">
					<text class="u-line-1">{{item.categorynNme}}</text>
				</view>
			</scroll-view>
			<block>
				<scroll-view scroll-y class="right-box" @scrolltolower="scrollEvent">
					
					<!-- 在ios中使用block可能会出现样式问题 -->
					<view class="page-view">
						<view class="class-item">
							<!-- <view class="item-title">
								<image :src="categories[current].picUrl" mode="aspectFill"></image>
								<text>{{categories[current].categorynNme}}</text>
							</view> -->
							<view class="item-container ">
								<view class="item-child" v-for="(tab,i) in categoryChildList" :key="i" @click="handleCategory(tab.goodsId)">
									<image class="item-menu-image" :src="tab.goodsImg" mode=""></image>
									<view class="item-menu-name">{{tab.goodsName}}</view>
								</view>
								<view class="empty" v-if="categoryChildList.length == 0">
									
									<text>暂无数据</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
			<!-- <block v-for="(item,index) in categories" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text>{{item.name}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
									<image class="item-menu-image" :src="item1.icon" mode=""></image>
									<view class="item-menu-name">{{item1.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block> -->
		</view>
		<button open-type="contact" class="box-xuanfu">
			<image src="../../static/kf_wx@2x.png" mode="" ></image>
		</button>
		<u-tabbar :list="tabbar" :mid-button="false" icon-size='45' active-color="#3E3E3E" inactive-color="#3E3E3E" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	//import classifyData from "@/common/classify.data.js";
	export default {
		data() {
			return {
				//tabbar: classifyData,
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				categories:[],
				categoryChildList:[],
				keyword:'',
				
				showEmpty:false,
				tabbar:[{
						iconPath: "/static/tab_sy_1.png",
						selectedIconPath: "/static/tab_sy_2.png",
						text: '首页',
						pagePath: "/pages/index/index"
					},{
						iconPath: "/static/tab_fl_1.png",
						selectedIconPath: "/static/tab_fl_2.png",
						text: '嗨美商城',
						pagePath: "/pages/fenlei/fenlei"
					},
					{
						iconPath: "/static/tab_gwd_1.png",
						selectedIconPath: "/static/tab_gwd_2.png",
						text: '购物车',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/gouwudai/gouwudai"
					},
					{
						iconPath: "/static/tab_wd_1.png",
						selectedIconPath: "/static/tab_wd_2.png",
						text: '会员中心',
						pagePath: "/pages/wode/wode"
					},
				],
				content:'',
				share:uni.getStorageSync('share')
			}
		},
		computed: {
			
		},
		onLoad(){
			//获取分类
			this.getCategory()
			//购物车数量
			this.getCartCount()
		},
		
		methods: {
			//切换之前回调
			async beforeSwitch(index){
				if (index == 2 || index == 3) {
					const res = await this.$u.api.getUserInfo()
					return true
				}
			},
			//分类
			async getCategory(){
				const params = {
					
				}
				const res = await this.$u.api.getNewCategoryList(params)
				console.log(res)
				this.categories = res.data
				this.getAllGoodsListByCategoryId(res.data[0].categoryId)
				// this.categoryChildList = res.data[this.current].child
				uni.stopPullDownRefresh()
			},
			//分类下的商品
			async getAllGoodsListByCategoryId(categoryId){
				const params = {
					categoryId:categoryId
				}
				const res = await this.$u.api.getAllGoodsListByCategoryId(params)
				this.categoryChildList = res.data
			},
			//搜索商品
			searchGoods(){
				
			},
			//清空搜索内容
			clearSearch(){
				
			},
			
			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(index,id) {
				
				if(index == this.current) return ;
				this.current = index;
				this.getAllGoodsListByCategoryId(this.categories[index].categoryId)
				
				
				// 如果为0，意味着尚未初始化
				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({size: true},res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if(!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return ;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			//右侧滚动事件
			scrollEvent(e){
				
			},
			//搜索
			handlesearch(){
				if (this.content != '') {
					const params = 'content=' + this.content + '&type=' + 0
					uni.navigateTo({
						url:'/pages/xinfenleishangpin/xinfenleishangpin?' + params
					})
				}
				
			},
			//分类跳转
			handleCategory(goodsId){
				const params = 'goodsId=' + goodsId 
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			},
			//购物袋数量
			async getCartCount(){
				const res = await this.$u.api.getCartCount()
				console.log(res,'购物车数量')
				this.tabbar[2].count = res.data
			},
		},
		//下拉刷新
		onPullDownRefresh(){
			this.getCategory()
		},
		//向下滑动重新请求数据
		onReachBottom(){
			
		},
	}
</script>
<style>
	.u-badge--bg--error.data-v-2b1712d8{
		background: #5D22BA !important;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		// flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding-left: 316rpx;
	}
	.slot-wrap image{
		width: 116rpx;
		height: 36rpx;
	}
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	.search{
		background: white;
		width: 750rpx;
		padding: 16rpx 28rpx;
	}
	.search-box{
		padding: 20rpx;
		background: #F6F6F6;
		border-radius: 8px 8px 8px 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.search-box image{
		width: 26rpx;
		height: 22rpx;
	}
	.search-box input{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #515658;
		line-height: 38rpx;
		width: 100%;
	}
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}
	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
	.u-tab-view {
		width: 216rpx;
		height: 100%;
	}
	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #5D22BA;
		line-height: 32rpx;
	}
	
	.u-tab-item-active {
		position: relative;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #5D22BA;
		line-height: 32rpx;
		background: #fff;
	}
	
	.u-tab-item-active::before {
		
	}
	.u-tab-view {
		height: 100%;
		padding-top: 16rpx;
	}
	
	.right-box {
		height: 100%;
	}
	
	.page-view {
		padding: 16rpx;
		height: 100%;
	}
	
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
		height: 100%;
	}
	
	.item-title {
		display: flex;
		flex-direction: column;
	}
	.item-title image{
		width: 518rpx;
		height: 188rpx;
		border-radius: 10px 10px 10px 10px;
	}
	.item-title text{
		padding-top: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	
	
	.item-container {
		display: flex;
		flex-wrap: wrap;
		margin: 0rpx -22rpx;
		// height: 100%;
	}
	
	
	.item-child{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 32rpx 22rpx 0rpx 21rpx;
		width: 144rpx;
	}
	.item-menu-image {
		width: 144rpx;
		height: 144rpx;
		border-radius: 8px 8px 8px 8px;
	}
	.item-menu-name {
		padding-top: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28rpx;
		text-align: center;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin-top: 300rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	
	.box-xuanfu{
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 15rpx;
		bottom: 300rpx;
		background: none;
		margin: 0;
	}
	.box-xuanfu::after{
		border: none;
	}
	.box-xuanfu image{
		width: 88rpx;
		height: 88rpx;
	}
</style>